<template>
  <div>
    <!-- 回到顶部 -->
    <a href="javascript:;" class="go-Top" title="回到顶部" ref="GoTopRef" @click="goTopClick"></a>
  </div>
</template>

<script>
export default {
  methods: {
    // 回到顶部按钮显示与隐藏
    goTop() {
      window.addEventListener('scroll', () => {
        if (document.documentElement.scrollTop > 0) {
          this.$refs.GoTopRef.style.display = 'block'
        } else {
          this.$refs.GoTopRef.style.display = 'none'
        }
      })
    },
    goTopClick() {
      document.documentElement.scrollTop = 0
    }
  },
  created() {
    // 回到顶部隐藏和显示
    this.goTop()
  }
}
</script>

<style>
.go-Top {
  position: fixed;
  bottom: 160px;
  left: 50%;
  margin-left: 500px;
  display: none;
  width: 49px;
  height: 44px;
  background: url(~@/assets/images/sprite.png) no-repeat -265px -47px;
  z-index: 9996;
}
</style>
